
import React, { memo } from 'react';
import cs from 'classnames';


import sty from './sty.module.css';
import { getSizeImage, handleTime } from '@/utils/format-utils'
import { Tag } from 'antd';
import { Link } from 'react-router-dom';

const SongListDetailHeader = (props) => {
  const { songDetail, collectSongsList } = props;


  const { name, tags = [], creator = {}, createTime, coverImgUrl, description } = songDetail || {};
  const { nickname, avatarUrl } = creator;
  const imgUrl = coverImgUrl && getSizeImage(coverImgUrl, 200) || '';
  const publishTime = handleTime(createTime, '{y}-{m}-{d}');


  const avatarImgUrl = avatarUrl && getSizeImage(avatarUrl, 35) || '';
  const renderTags = () => {
    return tags.length ? (tags.map(v => <Tag key={v} >
      <Link className={sty.tagItem} to={`/discover/songs?albumName=${v}&order=hot`}  >{v}</Link>
    </Tag>)) : null
  }
  const renderHTML = () => {
    let desc = (description + '');
    return desc.length ? desc.replace(/\n/gi, '<br />') : null
  }

  return <div className='flex'>
    <div className={sty.coverImg}>
      <img src={imgUrl} alt="" />
      <span className='image_sprite'></span>
    </div>

    <div className={sty.songDetail}>
      <div className={sty.titleWrap}>
        <i className={cs(sty.pos, 'icons')}></i>
        <h3 className={cs(sty.title, 'txt1')}>{name}</h3>
      </div>
      <div className={cs(sty.avatar, 'flex2')}>
        <img src={avatarImgUrl} alt="" />
        <span className={sty.nickname}>{nickname}</span>
        <span>{publishTime}创建</span>
      </div>
      <div
        className={cs("sprite_button favorite pointer flex2", sty.collection)}
        onClick={() => collectSongsList()}
      >
        <i className="sprite_button inner">收藏歌单
        </i>
      </div>
      <div className={cs('flex2', sty.tags)}>
        标签: {renderTags()}
      </div>
      <p className={sty.desc}>介绍: <span dangerouslySetInnerHTML={{ __html: renderHTML() }}></span></p>
    </div>
  </div>
}
export default memo(SongListDetailHeader)